<!DOCTYPE html>
<html lang="zh-CN">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>Document</title>
  <script src="./lib/mui/js/vue.min.js"></script>
  <link rel="stylesheet" href="http://cdn.bootcss.com/bootstrap/3.3.0/css/bootstrap.min.css">
  <!--使用Bootstrap的js插件，必须先调入jQuery-->
  <script src="http://libs.baidu.com/jquery/1.9.0/jquery.min.js"></script>

  <!-- 包括所有bootstrap的js插件或者可以根据需要使用的js插件调用　-->
  <script src="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
</head>

<body>
  <div id="app">
    <ul class="list-group">
      <li class='list-group-item' v-for='item in list' :key='item.id'>
        <span class="badge">评论人:{{item.user}}</span>
        {{item.content}}
      </li>
    </ul>
    <com @func='loadComments'></com>
  </div>

  <template id='templ'>
    <div>
      <div class='form-group'>
        <label for="">评论人</label>
        <input type="text" class="form-control" v-model='user'>
      </div>

      <div class='form-group'>
        <label for="">内容</label>
        <textarea class="form-control" v-model='content'></textarea>
      </div>

      <div class="from-group">
        <input type="button" value="发表评论" class='btn btn-primary' @click='postComment'>
      </div>
    </div>
  </template>

  <script>

    var comBox = {
      template: '#templ',
      data(){
        return {
          user:'',
          content:''
        }
      },
      methods: {
        postComment() {
          //发表评论的方法 
          //先组织处一个最新的评论数据对象
          //把对象存放发localStorage中
          //  localStorage 只支持存放字符串
          //  在保存最新的评论数据之前,要先从lovalStorage获取之前的评论数据(String) 转换成一个数据对象
          //  然后把最新的评论push到这个数组
          //  如果获取到的localStorage中的评论字符串不存在,可以返回 []
          //
          var comment = { id: Date.now(), user: this.user, content: this.content }
          var list = JSON.parse(localStorage.getItem('cmts') || '[]')

          list.unshift(comment)
          //重新保存最新的评论数据
          localStorage.setItem('ctms',JSON.stringify(list))
          this.user = this.content = ''
          this.$emit('func')
        }
      }
    }


    var vm = new Vue({
      el: '#app',
      data: {
        list: [
          { id: Date.now(), user: '李白', content: '天生我才必有用' },
          { id: Date.now(), user: '码云', content: '我不在乎钱' }
        ]
      },
     /*  created(){
        console.log('glyphicon-ok')
        this.loadComments()
      }, */
      methods: {
        loadComments(){
          var list = JSON.parse(localStorage.getItem('ctms') || '[]')
          this.list = list
          console.log(list)
        }
      },
      components: {
        'com': comBox
      }
      
    });
  </script>
</body>

</html>